window.addEventListener('load', function () {
    //禁止选中
    document.addEventListener('selectstart', function (e) {
        e.preventDefault();
    });
    //快捷导航模块
    //左边
    var moreLi = document.querySelector('.more');
    var moreHd = document.querySelector('.more-hd');
    var moreBd = document.querySelector('.more-bd');
    var moreI = moreHd.querySelector('i');
    var morePath = moreHd.querySelector('path');
    moreLi.addEventListener('mouseover', function () {
        moreLi.style.backgroundColor = '#fff';
        moreI.style.color = '#cf0a2c';
        morePath.setAttribute('d', 'M221.521 627.374l1.31-1.42 214.27-219.25c28.968-29.641 75.56-30.259 105.262-1.853l1.873 1.853 214.27 219.25c5.579 5.708 8.703 12.977 9.372 20.434l0.122 2.037v2.040c-0.243 8.159-3.408 16.244-9.494 22.471-12.226 12.51-31.778 12.957-44.527 1.34l-1.388-1.34-198.965-203.589c-12.226-12.51-31.778-12.957-44.527-1.34l-1.388 1.34-198.965 203.589c-12.679 12.974-33.236 12.974-45.915 0-6.113-6.255-9.279-14.384-9.497-22.58l0.007-2.049c0.25-7.512 2.977-14.953 8.18-20.932z');
        morePath.setAttribute('fill', '#cf0a2c');
        moreBd.style.display = 'block';
    });
    moreLi.addEventListener('mouseleave', function () {
        moreLi.style.backgroundColor = '#000';
        moreI.style.color = 'rgba(255, 255, 255, .6)';
        morePath.setAttribute('d', 'M221.521 439.292l1.31 1.42 214.27 219.25c28.968 29.641 75.56 30.259 105.262 1.853l1.873-1.853 214.27-219.25c5.579-5.708 8.703-12.977 9.372-20.434l0.122-2.037v-2.040c-0.243-8.159-3.408-16.244-9.494-22.471-12.226-12.51-31.778-12.957-44.527-1.34l-1.388 1.34-198.965 203.589c-12.226 12.51-31.778 12.957-44.527 1.34l-1.388-1.34-198.965-203.589c-12.679-12.974-33.236-12.974-45.915 0-6.113 6.255-9.279 14.384-9.497 22.58l0.007 2.049c0.25 7.512 2.977 14.953 8.18 20.932z');
        morePath.setAttribute('fill', '#FFFFFF');
        moreBd.style.display = 'none';
    });
    //右边
    var frLis = document.querySelectorAll('.fr-more');
    var frPath = document.querySelectorAll('.fr-path');
    var moreBds = document.querySelectorAll('#more-bd');
    for (let i = 0; i < frLis.length; i++) {
        frLis[i].addEventListener('mouseover', function () {
            this.style.backgroundColor = '#fff';
            this.style.color = '#cf0a2c';
            frPath[i].setAttribute('d', 'M221.521 627.374l1.31-1.42 214.27-219.25c28.968-29.641 75.56-30.259 105.262-1.853l1.873 1.853 214.27 219.25c5.579 5.708 8.703 12.977 9.372 20.434l0.122 2.037v2.040c-0.243 8.159-3.408 16.244-9.494 22.471-12.226 12.51-31.778 12.957-44.527 1.34l-1.388-1.34-198.965-203.589c-12.226-12.51-31.778-12.957-44.527-1.34l-1.388 1.34-198.965 203.589c-12.679 12.974-33.236 12.974-45.915 0-6.113-6.255-9.279-14.384-9.497-22.58l0.007-2.049c0.25-7.512 2.977-14.953 8.18-20.932z');
            frPath[i].setAttribute('fill', '#cf0a2c');
            moreBds[i].style.display = 'block';
        });
        frLis[i].addEventListener('mouseleave', function () {
            this.style.backgroundColor = '#000';
            this.style.color = 'rgba(255, 255, 255, .6)';
            frPath[i].setAttribute('d', 'M221.521 439.292l1.31 1.42 214.27 219.25c28.968 29.641 75.56 30.259 105.262 1.853l1.873-1.853 214.27-219.25c5.579-5.708 8.703-12.977 9.372-20.434l0.122-2.037v-2.040c-0.243-8.159-3.408-16.244-9.494-22.471-12.226-12.51-31.778-12.957-44.527-1.34l-1.388 1.34-198.965 203.589c-12.226 12.51-31.778 12.957-44.527 1.34l-1.388-1.34-198.965-203.589c-12.679-12.974-33.236-12.974-45.915 0-6.113 6.255-9.279 14.384-9.497 22.58l0.007 2.049c0.25 7.512 2.977 14.953 8.18 20.932z');
            frPath[i].setAttribute('fill', '#FFFFFF');
            moreBds[i].style.display = 'none';
        });
    }
    //购物车
    var shoppingCart = document.querySelector('.shopping-cart');
    var shoppingCartPath = document.querySelector('.shopping-cart-path');
    var shoppingCartCon = document.querySelector('.shopping-cart-con');
    shoppingCart.addEventListener('mouseover', function () {
        this.style.backgroundColor = '#fff';
        this.style.color = '#cf0a2c';
        shoppingCartPath.setAttribute('fill', '#cf0a2c');
        shoppingCartPath.setAttribute('fill-opacity', '1');
        shoppingCartCon.style.display = 'block';
    });
    shoppingCart.addEventListener('mouseleave', function () {
        this.style.backgroundColor = '#424242';
        this.style.color = 'rgba(255, 255, 255, .6)';
        shoppingCartPath.setAttribute('fill', '#FFFFFF');
        shoppingCartPath.setAttribute('fill-opacity', '0.6');
        shoppingCartCon.style.display = 'none';
    });
    //头部模块dd
    var dt = document.querySelector('.dt');
    var dd = document.querySelector('.dd');
    var lis = dd.querySelectorAll('li');
    var cons = document.querySelector('.dd-con').querySelectorAll('.dd-con-item');
    dt.addEventListener('click', function () {
        dd.style.display = 'block';
    });
    dd.addEventListener('mouseenter', function () {
        dd.style.display = 'block';
    });
    for (var i = 0; i < lis.length; i++) {
        // 设置索引号
        lis[i].setAttribute('index', i);
        //鼠标事件
        lis[i].addEventListener('mouseover', function () {
            var index = this.getAttribute('index');
            for (var i = 0; i < cons.length; i++) {
                cons[i].style.display = 'none';
            }
            cons[index].style.display = 'block';
        });
        cons[i].addEventListener('mouseleave', function () {
            this.style.display = 'none';
            dd.style.display = 'none';
        })
    }
    // 搜索模块
    var search = document.querySelector('.search');
    var searchBox = document.querySelector('.search-box');
    var searchMask = document.querySelector('.search-mask');
    var sliderBar = document.querySelector('.slider-bar');
    var close = document.querySelector('.close');
    var input = searchBox.querySelector('input');
    let scrollWidth = window.innerWidth - document.documentElement.offsetWidth;
    search.addEventListener('click', function () {
        searchBox.style.display = 'block';
        header.style.display = 'none';
        input.focus();
        //隐藏滚动条，避免元素晃动
        document.documentElement.style.overflow = 'hidden';
        document.documentElement.style.paddingRight = scrollWidth + 'px';
        sliderBar.style.marginRight = scrollWidth + 'px';
    });
    close.addEventListener('click', function () {
        searchBox.style.display = 'none';
        header.style.display = 'block';
        input.value = '';
        //清除热词淡入淡出动画
        var lis = document.querySelector('.hot-search').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.animationName = '';
        }
        //显示滚动条
        document.documentElement.style.overflow = 'auto';
        document.documentElement.style.paddingRight = '0px';
        sliderBar.style.marginRight = '0px';
    });
    searchMask.addEventListener('click', function () {
        searchBox.style.display = 'none';
        header.style.display = 'block';
        input.value = '';
        //清除热词淡入淡出动画
        var lis = document.querySelector('.hot-search').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.animationName = '';
        }
        //显示滚动条
        document.documentElement.style.overflow = 'auto';
        document.documentElement.style.paddingRight = '0px';
        sliderBar.style.marginRight = '0px';
    });
    // 刷新
    var refresh = document.querySelector('.refresh');
    var svg = refresh.querySelector('svg');
    var ul = document.querySelector('.hot-search').querySelector('ul');
    refresh.addEventListener('click', function () {
        //清除已有热词
        var lis = ul.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            ul.removeChild(lis[i]);
        }
        //打乱数组顺序
        var randomArr = getArrRandomly(hotSearchMsg);
        //创建10个搜索热词
        for (var i = 0; i < 10; i++) {
            var li = document.createElement('li');
            ul.appendChild(li);
            for (var k in randomArr[i]) {
                li.innerHTML = randomArr[i][k];
            }
            li.style.animationName = 'opacity-inout';
        }
        //刷新旋转动画
        svg.style.animationName = 'rotate';
        setTimeout(clearAnimation, 750);
    });
    //清除刷新旋转动画
    function clearAnimation() {
        svg.style.animationName = '';
    }
    //热门搜索数据
    var hotSearchMsg = [{
        info: 'MateBook 16'
    }, {
        info: '手机'
    }, {
        info: '洗地机'
    }, {
        info: '耳机'
    }, {
        info: '平板'
    }, {
        info: '美食酒饮狂欢'
    }, {
        info: 'p50 pro'
    }, {
        info: '力博得牙刷'
    }, {
        info: '摄像机'
    }, {
        info: 'p50'
    }, {
        info: 'matepad 11'
    }, {
        info: '充电器'
    }, {
        info: 'gt 3'
    }, {
        info: '路由器'
    }, {
        info: 'mate40'
    }, {
        info: 'p50 pocket'
    }, {
        info: '手表'
    }, {
        info: '数据线'
    }, {
        info: 'freebuds 4'
    }
    ];
    // 打乱数组顺序
    function getArrRandomly(arr) {
        for (var i = 0; i < arr.length; i++) {
            var randomIndex = Math.floor(Math.random() * (i + 1));
            var itemIndex = arr[randomIndex];
            arr[randomIndex] = arr[i];
            arr[i] = itemIndex;
        }
        return arr;
    }
    // 预先创建10个搜说热词
    var randomArr = getArrRandomly(hotSearchMsg);
    for (var i = 0; i < 10; i++) {
        var li = document.createElement('li');
        ul.appendChild(li);
        for (var k in randomArr[i]) {
            li.innerHTML = randomArr[i][k];
        }
    }
    // 侧边栏模块
    //获取元素
    var header = document.querySelector('.header');
    var headerMask = document.querySelector('.header-mask');
    var dt = document.querySelector('.dt');
    var type = document.querySelector('.type');
    var backTop = document.querySelector('.back-top');
    var news = document.querySelector('.news');
    //获取网页被卷去大小
    var typeTop = type.offsetTop;
    var newsTop = news.offsetTop;
    //页面滚动事件 scroll
    followHeader();
    document.addEventListener('scroll', followHeader);
    function followHeader() {
        if (window.pageYOffset >= 36) {
            header.style.position = 'fixed';
            header.style.marginLeft = '-600px';
            headerMask.style.position = 'fixed';
        } else {
            header.style.position = 'static';
            header.style.marginLeft = '0';
            headerMask.style.position = 'static';
        }
    }
    showDt();
    showBackItem();
    document.addEventListener('scroll', showDt);
    document.addEventListener('scroll', showBackItem);
    function showDt() {
        if (window.pageYOffset >= typeTop) {
            dt.style.display = 'block';
        } else {
            dt.style.display = 'none';
        }
    }
    function showBackItem() {
        if (window.pageYOffset >= newsTop) {
            backTop.style.display = 'block';
        } else {
            backTop.style.display = 'none';
        }
    }
    //返回顶部事件
    backTop.addEventListener('click', function () {
        animate(window, 0);
    });
    //缓动返回顶部动画
    function animate(obj, target, callback) {
        //清除旧定时器，只保留当前一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            // 获取步长
            var step = (target - window.pageYOffset) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                //停止动画，本质是停止定时器
                clearInterval(obj.timer);
                // 回调函数写到定时器结束里
                if (callback) {
                    callback();
                }
            }
            window.scroll(0, window.pageYOffset + step);
        }, 10);
    }
    //底部模块
    var as = document.querySelector('.guan-zhu').querySelectorAll('a');
    // var lis = document.querySelector('.guan-zhu').querySelectorAll('li');
    for (let i = 0; i < as.length; i++) {
        //每个图标间隔30px
        let index = i * 30;
        as[i].style.backgroundPosition = '-' + 159 - index + 'px -2px';
        as[i].addEventListener('mouseenter', function () {
            this.style.backgroundPosition = '-' + 159 - index + 'px -32px';
        });
        as[i].addEventListener('mouseleave', function () {
            this.style.backgroundPosition = '-' + 159 - index + 'px -2px';
        })
    }
});